<template>
  <div>
    <div class="header_search_nav search_form">
      <div class="ipt_left">
        <el-form ref="Searchform" :model="queryParams" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="筛选员工" prop="keyword">
                <el-input
                  class="w-200"
                  v-model="queryParams.keyword"
                  placeholder="请输入员工姓名或手机号"
                  @keyup.enter.native="handleQuery"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="员工职位" prop="labelCode">
                <el-select
                  class="w-200"
                  v-model="queryParams.labelCode"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in roleArry"
                    :key="item.code"
                    :label="item.msg"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div class="btn_right">
        <button class="btn1" @click="handleQuery">筛选</button>
        <button class="btn2" @click="resetQuery">重置</button>
      </div>
    </div>

    <!-- 人员列表 -->
    <div class="table_card">
      <!-- 上部分 title -->
      <div class="table_card_top">
        <span class="solid_left"></span>
        <div class="table_card_title">员工列表</div>
        <!-- <div class="op_right">
          <button class="primary_button" @click="publishGood">添加员工</button>
        </div> -->
      </div>

      <div class="table_list">
        <el-table
          :data="StoresList"
          stripe
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="nickname" label="员工名称"> </el-table-column>
          <el-table-column prop="stageName" label="艺名名称"> </el-table-column>
          <el-table-column prop="sex" label="员工性别">
            <template slot-scope="scope">
              {{ SexOptions[scope.row.sex] }}
            </template>
          </el-table-column>
          <el-table-column prop="mobile" label="手机号"> </el-table-column>
          <el-table-column prop="storePost" label="员工职位"> </el-table-column>

          <el-table-column prop="storePost" label="员工技能">
            <template slot-scope="scope">
              <span
                v-for="(item, index) in scope.row.itemSimpleVoList"
                :key="index"
                >{{ item.itemName }},</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="status" label="员工状态">
            <template slot-scope="scope">
              <div>
                <el-switch
                  v-model="scope.row.status"
                  :active-value="0"
                  :inactive-value="1"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="handleStatusChange(scope.row)"
                >
                </el-switch>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="setUserItem(scope.row)"
                >设置技能</el-button
              >
              <el-button size="mini" type="text" @click="UpdateName(scope.row)"
                >修改艺名</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <!-- 设置技能 -->
    <el-dialog
      title="设置技能"
      :visible.sync="setItemVis"
      width="500px"
      @close="setItemCancle"
    >
      <div class="setItem">
        <el-form
          :model="setItemObj"
          :rules="setItemRules"
          ref="setItemForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="技师技能" prop="itemIds">
            <el-select
              :loading="itemLoading"
              v-model="setItemObj.itemIds"
              placeholder="请选择技师技能"
              multiple
              filterable
              class="w-100"
            >
              <el-option
                v-for="item in itemArray"
                :key="item.itemId"
                :label="item.itemName"
                :value="item.itemId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="setItemCancle">取消</el-button>
        <el-button type="primary" :loading="setItemLoading" @click="setItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改艺名 -->
    <el-dialog
      title="修改艺名"
      :visible.sync="updateStageNamedialog"
      width="500px"
      @close="updateStageNameCancle"
    >
      <div class="setItem">
        <el-form
          :model="updateStageNameForm"
          :rules="stageNameRules"
          ref="updateStageNameForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="艺名名称" prop="stageName">
            <el-input
              class="w-100"
              v-model="updateStageNameForm.stageName"
              placeholder="请输入要修改艺名名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="技师头像" prop="avatar">
            <!-- {{ updateStageNameForm.avatar }} -->
            <div class="up-form-lab">
              <div>
                <up-files
                  :accept="'png,jpg,jpeg'"
                  :size="1"
                  :multiple="false"
                  v-model="updateStageNameForm.avatar"
                  @change="changeFile('avatar')"
                >
                </up-files>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="技师生活照" prop="usersImageList">
            <div class="up-form-lab">
              <div>
                <up-files
                  :accept="'png,jpg,jpeg'"
                  :size="2"
                  v-model="updateStageNameForm.usersImageList"
                  @change="changeFile('usersImageList')"
                >
                </up-files>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="updateStageNameCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="updateStageNameLoading"
          @click="setStageName"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStoreUsers,
  changeUserInfoStatus,
  userSettingItem,
  itemAllList,
  roleLabel,
  updateStageName,
  getUser,
} from "@/api/business/stores";
import { CommonStatusEnum } from "@/utils/constants";
import UpFiles from "@/components/UpFiles";
import { getStoreId } from "@/utils/auth";
export default {
  name: "EryuoaStorepersonList",
  components: { UpFiles },
  data() {
    return {
      updateStageNamedialog: false, // 修改艺名
      updateStageNameForm: {
        stageName: "",
        avatar: [], // 头像地址
        userId: "",
        usersImageList: [],
      },
      setItemObj: {
        userId: "",
        itemIds: [],
      },
      textarea: "",
      value: true,
      value1: "",
      loading: false,
      StoresList: [], // 列表数据

      options: [],
      // 性别
      SexOptions: {
        0: "未知",
        1: "男",
        2: "女",
      },

      // 状态
      statusOptions: {
        0: "正常",
        1: "停用",
      },

      value: "",
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        keyword: "",
        labelCode: "",
      },
      total: 0,

      setItemVis: false,
      setItemLoading: false,
      updateStageNameLoading: false,
      updateStageName: {
        userId: "",
        itemIds: [],
      },
      //    {  min:1,message: "q", trigger: "blur" },
      setItemRules: {
        itemIds: [
          { required: true, message: "请选择技师技能", trigger: "change" },
        ],
      },

      stageNameRules: {
        stageName: [
          {
            required: true,
            message: "请输入要修改的艺名名称",
            trigger: "change",
          },
        ],

        avatar: [
          {
            min: 1,
            required: true,
            type: "array",
            message: "请上传技师形象照！",
            trigger: "change",
          },
        ],

        usersImageList: [
          {
            min: 1,
            required: true,
            type: "array",
            message: "请上传技师生活照！",
            trigger: "change",
          },
        ],
      },
      itemLoading: false,
      itemArray: [],

      roleLoading: false,
      roleArry: [],
    };
  },

  created() {
    this.getList();
    this.getRoleLabel();
  },

  mounted() {},

  methods: {
    getUserInfo(row) {
      getUser({ id: row.id })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.updateStageNameForm.userId = data.id;
            this.updateStageNameForm.stageName = data.stageName;
            if (data.avatar) {
              this.updateStageNameForm.avatar = [
                {
                  fileUrl: data.avatar,
                  fileType: this.getFileType(data.avatar).type,
                  fileName: this.getFileType(data.avatar).name,
                },
              ];
            } else {
              this.updateStageNameForm.avatar = [];
            }

            if (data.usersImageList) {
              this.updateStageNameForm.usersImageList = data.usersImageList.map(
                (item) => {
                  return {
                    fileUrl: item.imageUrl,
                    fileType: this.getFileType(item.imageUrl).type,
                    fileName: this.getFileType(item.imageUrl).name,
                  };
                }
              );
            } else {
              this.updateStageNameForm.usersImageList = [];
            }
          }
        })
        .catch((err) => {});
    },

    getFileType(img) {
      let nameArry = img.split("/");
      let name = nameArry[nameArry.length - 1];
      let typeArry = name.split(".");
      let type = typeArry[typeArry.length - 1];
      console.log(type);
      return {
        type,
        name,
      };
    },

    // 修改艺名
    UpdateName(row) {
      this.updateStageNamedialog = true;
      this.getUserInfo(row);
    },

    changeFile(name) {
      this.$refs["updateStageNameForm"].validateField(name);
    },

    setUserItem(row) {
      this.setItemObj.userId = row.id;
      this.setItemVis = true;
      this.getItemAllList();
    },

    getItemAllList() {
      this.itemLoading = true;
      itemAllList(this.queryParams)
        .then((res) => {
          console.log(res);
          this.itemLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.itemArray = data;
          }
        })
        .catch((err) => {
          this.itemLoading = false;
        });
    },

    getRoleLabel() {
      this.roleLoading = true;
      roleLabel()
        .then((res) => {
          this.roleLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.roleArry = data;
          }
        })
        .catch((err) => {
          this.roleLoading = false;
        });
    },

    setItemCancle() {
      this.resetFormData("setItemForm");
      this.$nextTick(() => {
        this.setItemVis = false;
        this.setItemLoading = false;
      });
    },

    updateStageNameCancle() {
      this.resetFormData("updateStageNameForm");
      this.$nextTick(() => {
        this.updateStageNamedialog = false;
        this.updateStageNameLoading = false;
      });
    },

    // 修改艺名
    setStageName(row) {
      this.$refs["updateStageNameForm"].validate((valid) => {
        if (valid) {
          this.updateStageNameLoading = true;

          const { userId, stageName, avatar, usersImageList } =
            this.updateStageNameForm;

          console.log(avatar);
          console.log(usersImageList);
          let usersImages = usersImageList.map((item) => {
            return {
              imageUrl: item.fileUrl,
            };
          });
          // console.log(usersImages);
          // return false;
          updateStageName({
            userId: userId,
            stageName: stageName,
            avatar: !!avatar && avatar.length > 0 ? avatar[0].fileUrl : "",
            usersImageList: usersImages,
          })
            .then((res) => {
              this.updateStageNameLoading = false;
              let { code, msg } = res;
              if (code === 0) {
                this.getList();
                this.$message.success("操作成功");
                this.updateStageNameCancle();
              }
            })
            .catch(() => {
              this.updateStageNameLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    setItemSave() {
      if (this.setItemLoading) {
        return false;
      }

      this.$refs["setItemForm"].validate((valid) => {
        if (valid) {
          this.setItemLoading = true;

          userSettingItem({
            userId: this.setItemObj.userId,
            itemIds: this.setItemObj.itemIds.join(","),
          })
            .then((res) => {
              this.setItemLoading = false;
              let { code, msg } = res;
              if (code === 0) {
                this.getList();
                this.$message.success("操作成功");
                this.setItemCancle();
              }
            })
            .catch(() => {
              this.setItemLoading = false;
            });
        } else {
          return false;
        }
      });
    },

    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === CommonStatusEnum.ENABLE ? "启用" : "停用";
      this.$modal
        .confirm('确认要"' + text + '""' + row.nickname + '"用户吗?')
        .then(function () {
          return changeUserInfoStatus(row.id, row.status);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status =
            row.status === CommonStatusEnum.ENABLE
              ? CommonStatusEnum.DISABLE
              : CommonStatusEnum.ENABLE;
        });
    },

    // 筛选
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },

    getList() {
      this.loading = true;
      getStoreUsers(this.queryParams)
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.StoresList = data.list;
            this.total = data.total;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetFormData("Searchform");
      this.handleQuery();
    },

    // 表单重置
    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },

    publishGood() {},

    rest() {
      //   this.queryParams.deptId = undefined;
      //   this.queryParams.mobile = "";
    },

    // handleClose(done) {
    //   this.$confirm("确认关闭？")
    //     .then((_) => {
    //       done();
    //     })
    //     .catch((_) => {});
    // },
  },
};
</script>

<style lang="scss" scoped>
.goodTop {
  width: 100%;
  height: 48px;
  background: #ffffff;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  line-height: 48px;
  padding-left: 16px;
  .good_list {
    margin-right: 32px;
  }

  .good_active {
    color: #0052d9;
    border-bottom: 1px solid #0052d9;
  }
}

.w-200 {
  width: 200px;
  background: #ffffff;
  border-radius: 4px;
}

.client_name {
  font-size: 14px;
  font-weight: 400;
  color: #0052d9;
}

.give {
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-top: 40px;
  line-height: 40px;
}

.el-form-item {
  margin-bottom: 20px;
}

.recharge_form {
  padding: 10px 24px;
}

.memberName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}
.el_row_item {
  margin-bottom: 10px;
}
.el_row_date {
  margin-top: 20px;
}
.el_row_reason {
  margin-top: 10px;
}

.el_row_date {
  .el-form-item {
    margin-bottom: 0px;
  }
}

.separate_left {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-right: 12px;
}
.separate_right {
  width: 1px;
  height: 14px;
  // background: #e9e9e9;
  margin-left: 12px;
}
.setItem {
  padding: 10px 24px;
}
</style>
